<template>
  <v-group :config="config" @transformend="handleTransformEnd">
    <v-line
      :config="{
        points: [5, 70, 140, 23, 250, 60, 300, 20],
        stroke: '#6D7B92',
        strokeWidth: 20,
        lineCap: 'round',
        lineJoin: 'round',
      }"
    ></v-line>
    <v-line
      :config="{
        points: [5, 70, 140, 23, 250, 60, 300, 20],
        stroke: '#f1a94b',
        strokeWidth: 20,
        lineCap: 'round',
        lineJoin: 'round',

        /*
         * line segments with a length of 29px with a gap
         * of 20px followed by a line segment of 0.001px (a dot)
         * followed by a gap of 20px
         */
        dash: [20, 40],
        dashOffset: dashOffset,
      }"
    ></v-line>
    <v-text
      :config="{
        text: 'sdfasf',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'black',
      }"
    >
    </v-text>
  </v-group>
</template>
<script>
export default {
  name: "XLine",
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
    window.setInterval(() => {
      //console.log(this.dashOffset, 'this.dashOffset');
      //60=20+40
      if (this.dashOffset <= -60) {
        this.dashOffset = 0;
      }
      this.dashOffset = this.dashOffset - 1;
      //console.log('test')
      //this.dashOffset = this.dashOffset + 1;
      //this.dash = [this.dash[0] , this.dash[1], this.dash[2], this.dash[3]];
      //this.dash = [this.dash[0] , this.dash[1], this.dash[2], this.dash[3]]
    }, 50)
  },
  data () {
    return {
      dashOffset: 0,
    }
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    handleTransformEnd (...p) {
      this.$emit('transformend', ...p)
    },
  },
}
</script>
